<template>
    <div class="container">
        <div class="con" v-for="(value,key) in list">
            <div class="dataCon" :style="{width:`calc(100% - ${index*20}px)`}">
                <div class="data" @click="look(value)">
                    <a>{{value.phone}}</a>
                    <a>{{static_level[value.static_level]}}</a>
                    <a><a-icon type="star" v-for="i in Number(value.namic_level)"/></a>
                    <a>{{value.first_guadan==="0"?"未排单":"已排单"}}</a>
                    <a>排单总金额:{{value.order_money||0}}</a>
                    <a>体验:{{value.static_0||0}}</a>
                    <a>铜牌:{{value.static_1||0}}</a>
                    <a>银牌:{{value.static_2||0}}</a>
                    <a>金牌:{{value.static_3||0}}</a>
                    <a>铂金:{{value.static_4||0}}</a>
                    <a>钻石:{{value.static_5||0}}</a>
                    <a>至尊:{{value.static_6||0}}</a>
                </div>
                <div class="circle" v-if="value.pid_status===1" @click="look(value)">
                    {{value.child.length===0?`+`:`-`}}
                </div>
            </div>
            <treeDownList :list="value.child" :index="index+1"></treeDownList>
        </div>
    </div>
</template>

<script>
    import { static_level } from '../../utils/status'
    import Member from '../../api/Member'
    export default {
        data(){
            return{
                static_level,
            }
        },
        props:{
            list:{
                type:Array,
                default:()=>{
                    return[]
                }
            },
            index:{
                type: Number,
                default:0,
            }
        },
        methods:{
            look(value){
                if(value.pid_status===0)return
                Member.teamList({ uid:value.uid}).then(res => {
                    value.child = value.child.length===0?res.data.map(v=>{
                        v.child = []
                        return v
                    }):[]
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .container{
        >div.con{
            .dataCon{
                position: relative;
                float: right;
                border-radius: 8px;
                border: 1px solid #1890FF;
                margin-bottom: 10px;
                >div.data{
                    padding: 13px 13px 13px 30px;
                    a{
                        &:not(:last-child){
                            margin-right: 10px;
                        }
                    }
                }
                >div.circle{
                    @size:18px;
                    width: @size;
                    height: @size;
                    position: absolute;
                    z-index: 1;
                    top: 50%;
                    left: 5px;
                    border: 1px solid #1890ff;
                    border-radius: 100%;
                    transform: translate(0,-50%);
                    color: #1890ff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
</style>